<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card class="card-container">
    <div id="main" style="width: 1300px; height: 600px"></div>
  </el-card>
</template>

<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import { reportss } from '@/api/reports'
import _ from 'lodash'

const options = {
  title: {
    text: '用户来源'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#E9EEF3'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      boundaryGap: false
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ]
}
onMounted(async () => {
  const myChart = echarts.init(document.getElementById('main'))
  const res = await reportss()
  const result = _.merge(res, options)
  myChart.setOption(result)
})
</script>

<style lang="scss" scoped>
.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#main {
  text-align: center;
}
</style>
